<template>
    <!-- 页面的根视图元素 -->
    <view class="">
        <!-- 轮播图组件 -->
        <swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
            <!-- 使用 v-for 遍历 lunboList 数组，为每个元素创建一个轮播项 -->
            <swiper-item v-for="(item,index) in lunboList">
                <view class="swiper-item">
                    <!-- 显示轮播图的图片，图片源通过 :src 绑定 item.url -->
                    <image :src="item.url" mode="" style="width: 100%;"></image>
                </view>
            </swiper-item>
        </swiper>
    </view>
    <!-- 类别选项卡 -->
    <view class="category-tabs">
        <!-- 每个类别选项，点击时切换 currentCategory 的值 -->
        <view :class="{'active': currentCategory === 'history'}" @click="currentCategory = 'history'">美丽风景</view>
        <view :class="{'active': currentCategory === 'food'}" @click="currentCategory = 'food'">著名美食</view>
        <view :class="{'active': currentCategory === 'explore'}" @click="currentCategory = 'explore'">金牌向导</view>
        <view :class="{'active': currentCategory === 'specialties'}" @click="currentCategory = 'specialties'">著名特产
        </view>
    </view>
    <!-- 根据当前选择的类别显示内容 -->
    <view class="category-content" v-if="currentCategory">
        <!-- 遍历 currentCategoryData 数组，为每个元素创建一个类别项 -->
        <view class="item" v-for="(item, index) in currentCategoryData" :key="index"
            @tap="toDetails(item.objectId,item.type)">
            <!-- 显示类别项的图片 -->
            <image :src="item.img" mode="aspectFill" class="item-image"></image>
            <view class="item-info">
                <!-- 显示类别项的名称 -->
                <view class="item-title">{{ item.name }}</view>
                <!-- 可添加更多文字内容 -->
            </view>
        </view>
    </view>
</template>
<script setup>
    // 从 Vue 导入 ref 和 computed 函数
    import { ref, computed } from 'vue'
    // 从 uni-app 导入 onLoad 函数
    import { onLoad } from '@dcloudio/uni-app'
    // 导入自定义的配置文件
    import { CONFIG } from '../../utils/config.js'
    // 导入用户状态存储
    import { userStore } from '../../store/userStore';
    // 创建用户状态存储的实例
    let store = userStore()
    // 在页面加载时调用多个初始化函数
    onLoad(() => {
        getLunbo() // 轮播图
        gethistorys("1") // 风景
        getFoods("2") // 美食
        getExplores("3") // 名人
        getspecialties("4") // 特产
    })
    // 跳转到详情页面的函数
    function toDetails(id) {
        uni.navigateTo({
            url: "/pages/playinChinaDetails/playinChinaDetails?id=" + id
        })
    }
    // 存储轮播图数据的响应式数组
    let lunboList = ref([])
    // 获取轮播图数据的异步函数
    async function getLunbo() {
        // 发起 GET 请求获取轮播图数据
        let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/meishilunbo")
        // 处理返回结果，对 url 进行修剪
        lunboList.value = res.results.map(item => {
            item.url = item.url.trim()
            return item
        })
        console.log(lunboList.value)
    }
    // 当前选择的类别，默认为历史
    const currentCategory = ref('history');
    // 根据当前类别计算显示的数据
    const currentCategoryData = computed(() => {
        switch (currentCategory.value) {
            // 当选择历史类别时，返回历史数据
            case 'history':
                return historys.value;
            // 当选择美食类别时，返回美食数据
            case 'food':
                return foods.value;
            // 当选择探索类别时，返回探索数据
            case 'explore':
                return explores.value;
            // 当选择特产类别时，返回特产数据
            case 'specialty':
                return specialties.value;
            // 默认返回特产数据
            default:
                return specialties.value;
        }
    });
    // 存储风景数据的响应式数组
    let historys = ref([])
    // 获取风景数据的异步函数
    async function gethistorys(type) {
        // 构造请求数据
        let data = {
            "type": type
        }
        // 对请求数据进行编码
        let ed = encodeURI(JSON.stringify(data))
        // 发起 GET 请求获取风景数据
        let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/ChinaPlayItem?where=" + ed)
        console.log(res)
        historys.value = res.results
    }
    // 存储美食数据的响应式数组
    let foods = ref([])
    // 获取美食数据的异步函数
    async function getFoods(type) {
        // 构造请求数据
        let data = {
            "type": type
        }
        // 对请求数据进行编码
        let ed = encodeURI(JSON.stringify(data))
        // 发起 GET 请求获取美食数据
        let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/ChinaPlayItem?where=" + ed)
        console.log(res)
        foods.value = res.results
    }
    // 存储探索数据的响应式数组
    let explores = ref([])
    // 获取探索数据的异步函数
    async function getExplores(type) {
        // 构造请求数据
        let data = {
            "type": type
        }
        // 对请求数据进行编码
        let ed = encodeURI(JSON.stringify(data))
        // 发起 GET 请求获取探索数据
        let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/ChinaPlayItem?where=" + ed)
        console.log(res)
        explores.value = res.results
    }
    // 存储特产数据的响应式数组
    let specialties = ref([])
    // 获取特产数据的异步函数
    async function getspecialties(type) {
        // 构造请求数据
        let data = {
            "type": type
        }
        // 对请求数据进行编码
        let ed = encodeURI(JSON.stringify(data))
        // 发起 GET 请求获取特产数据
        let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/ChinaPlayItem?where=" + ed)
        console.log(res)
        specialties.value = res.results
    }
</script>

<style>
 .category-tabs {
        display: flex;
        justify-content: space-around;
        padding: 10px;
        background-color: #fa436a;
    }
 .category-tabs view {
        border: 1px solid #fa436a;
        border-radius: 10px;
        background-color: white;
        flex: 1;
        text-align: center;
        padding: 10px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
 .category-tabs view.active {
        border: 1px solid #0eb0c9;
        border-radius: 10px;
        background-color: #0eb0c9;
        color: #fff;
        font-style: italic;
        font-weight: bold;
    }
 .category-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px;
    }
 .item {
        width: 48%;
        /* 两列布局 */
        margin-bottom: 10px;
    }
 .item-image {
        width: 160px;
        height: 200px;
        /* object-fit: cover; */
        border-radius: 8px;
        /* 圆角边框 */
        margin-right: 5px;
    }
 .item-info {
        margin: 5px;
        width: 100%;
        text-align: center;
        padding: 5px;
    }
 .item-title {
        font-size: 16px;
        font-weight: bold;
        margin-right: 25px;
    }
</style>